<template>
    <li class="my-good">
        <img :src="good.pic" alt="">
        <p class="ellipse">{{good.name}}</p>
        <span class="ellipse">{{good.characteristic}}</span>
        <span class="price">{{good.minPrice}}</span>
    </li>
</template>

<script>
export default {
    name: 'my-good',
    props: {
        good: Object
    }
}
</script>

<style scoped lang="scss">
    .my-good {
        padding: 10px;
        background-color: #fff;
        font-size: 26px;
        img {
            width: 100%;
            height: 460px;
        }
        p {
            width: 288px;
            color: #333;
            margin-top: 16px;
        }
        span {
            display: block;
            margin-top: 20px;
            font-size: 24px;
            color: #b2b2b2;
            width: 288px;
        }
        .price {
            color: #D00000;
        }
    }
</style>